<!--
- Author:  LiShibin.
- Date:    2018/4/9 0009.
- File:    member.
-->
<template>
  <div class="pb86">
    <div class="MyCouponsbox" style="padding-top: 60px;">
      <div class="couponlist">
        <ul>
          <li :class="{'on': type == '0'}" @click="switchType('0')">未使用（{{couponCountInfo.not_use}}）</li>
          <li :class="{'on': type == '3'}" @click="switchType('3')">已过期（{{couponCountInfo.drop}}）</li>
        </ul>
      </div>
      <div class="Coupons">
        <div class="MyCoupons">
          <ul
            v-infinite-scroll="loadMore"
            infinite-scroll-disabled="false"
            infinite-scroll-distance="0"
            infinite-scroll-immediate-check="false">
            <li class="Couponsblock f-cb" v-for="coupon in couponList.data">
              <div class="couponright" style="height: 95px;">
                <!--<i class=" iconfont icon-yuandianzhong icontop"></i> <i class=" iconfont icon-yuandianzhong iconbottom"></i>-->
                <h3><span>{{coupon.coupon_amount}}</span></h3>
                <p v-show="coupon.coupon_type == '1'">满{{coupon.coupon_need_amount}}元可用</p>
              </div>
              <div class="couponleft" style="padding: 5px 5px 0 0">
                <div class="storename" style="height: 90px; width: 100%; position: relative">
                  <h3><span class="Preferentiallabel" v-show="coupon.coupon_type == '1'">满减</span><span class="Preferentiallabel" v-show="coupon.coupon_type == '2'">立减</span>{{coupon.coupon_abstract}}</h3>
                  <p style="padding-top: 10px" v-show="coupon.start_time != '0' && coupon.end_time != '0'">{{coupon.start_time | timestampToDate('yyyy-MM-dd')}} - {{coupon.end_time | timestampToDate('yyyy-MM-dd')}}</p>
                  <!--<div class="Usebtn" style="bottom: 30px">立即使用</div>-->
                  <div style="position: absolute; bottom: 0; width: 95%; height: 25px; font-size: 12px; border-top: 1px dashed #aaa; line-height: 25px;" @click="toggleRangeShow(coupon)">详细信息<i v-show="coupon.rangeShow" class="iconfont icon-up" style="float: right"></i><i v-show="!coupon.rangeShow" class="iconfont icon-down-copy" style="float: right"></i>
                  </div>
                </div>
              </div>
              <div style="padding: 10px 5px; margin-top: 90px;" v-show="coupon.rangeShow">使用范围：
                <span v-for="item in coupon.goods_list" @click="gotoUseCoupon(item)" style=" display: inline-block; margin: 2px 2px 2px 0; padding: 2px 5px 2px 0; border-radius: 5px; font-size: 12px;">{{item.target_name}}</span>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <empty-data :show="couponList.allLoaded && couponList.data.length <= 0"></empty-data>
    <loading-more :allLoaded="couponList.allLoaded" :show="couponList.data.length > 0"></loading-more>
    <footer-tab></footer-tab>
  </div>
</template>

<script>
  export default{
    data() {
      return {
        type: '0', // 0:未使用，1:已使用 3:已过期
        couponCountInfo: {},
        couponList: {requested: false, loading: false, allloaded: false, page: 1, pageSize: 10, data: []}
      }
    },
    components: {},
    created() {
      this.getMemberCouponCount()
      this.getCouponList(this.couponList.page, this.couponList.pageSize)
    },
    methods: {
      gotoUseCoupon(item) {
        if (item.type == 'all_gc') {
          this.$router.push({name: 'goods-classify'})
        } else if (item.type == 'all_stc') {
          this.$router.push({name: 'goods-classify', query: {id: item.target_id}})
        } else if (item.type == 'goods') {
          this.$router.push({name: 'goods-detail', params: {id: item.target_id}})
        }
      },
      switchType(value) {
        this.type = value
        this.couponList = {requested: false, loading: false, allloaded: false, page: 1, pageSize: 5, data: []}
        this.getCouponList(this.couponList.page, this.couponList.pageSize)
      },
      toggleRangeShow(coupon) {
        coupon.rangeShow = !coupon.rangeShow
      },
      getCouponList(page, pageSize) {
        this.couponList.loading = true
        let params = {coupon_type: 0, cm_status: this.type, store_id: 0, page: page, pageSize: pageSize, sortType: 1, desc: 1}
        this.$request.getMemberCouponList(params).then(data => {
          if (data.length < this.couponList.pageSize) {
            this.couponList.allLoaded = true
          }
          for (let i = 0; i < data.length; i++) {
            data[i].rangeShow = false
          }
          this.couponList.data = [...this.couponList.data, ...data]
        }).finally(() => {
          this.couponList.requested = true
          this.couponList.loading = false
        })
      },
      getMemberCouponCount() {
        this.$request.getMemberCouponCount().then(data => {
          this.couponCountInfo = data
        })
      },
      loadMore() {
        if (this.couponList.loading || this.couponList.allLoaded) { // 正在加载 或 已取得全部数据
          return
        }
        setTimeout(() => {
          this.getCouponList(++this.couponList.page, this.couponList.pageSize)
        }, 500)
      }
    }
  }
</script>

<style>

</style>